<template>
  <div class="no-card">
    <div class="card customer-manage">
      <div class="flx-justify-between">
        <el-row>
          <!-- 菜单按钮 -->
          <page-menu
            :menuConfig="menuConfig"
            @handleMenuClick="handleMenuClick"
            class="menu"
          ></page-menu>
          <!-- 子筛选项 -->
          <page-sub-menu
            :subMenuConfig="subMenuConfig"
            @handleSubMenuClick="handleSubMenuClick"
          ></page-sub-menu>
        </el-row>
        <!-- 展开收起搜索的按钮 -->
        <el-row>
          <page-search-change-btn
            :searchStatus="searchStatus"
            @searchStatusChange="searchStatusChange"
          ></page-search-change-btn>
        </el-row>
      </div>
      <!-- 搜索 -->
      <page-search
        v-if="searchStatus"
        :formConfig="formConfig"
        @resetBtnClick="handleResetClisk"
        @queryBtnClick="handleQueryClisk"
      ></page-search>
    </div>
    <!-- 带有 icon 的点击按钮 -->
    <page-icon-btn :menuList="menuList" @handleIconMenuClick="handleIconMenuClick"></page-icon-btn>
    <!-- table -->
    <div class="no-card">
      <div class="card">
        <page-table
          ref="pageTableRef"
          :tableConfig="privateTableConfig"
          :requestApi="requestApi"
        ></page-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { menuConfig, subMenuConfig, menuList } from '@/config/customer/customerManage'
import { formConfig } from '@/config/customer/customerManage/formConfig'
import { privateTableConfig } from '@/config/customer/customerManage/privateTableConfig'
import { tableList } from '@/api/modules/customer'
import { usePageSearch } from '@/hooks/usePageSearch'
const [handleResetClisk, handleQueryClisk, pageTableRef] = usePageSearch()

// 定义 API 接口
const requestApi = ref(tableList)

// 搜索状态切换
const searchStatus = ref(false)
const searchStatusChange = (status: boolean) => {
  searchStatus.value = status
}

// 主按钮点击事件
const handleMenuClick = (sign: string): void => {
  menuConfig.value.active = sign
}

// 子按钮点击事件
const handleSubMenuClick = (sign: string): void => {
  subMenuConfig.value.active = sign
}

// 子按钮点击事件
const handleIconMenuClick = (sign: string): void => {
  console.log('sign', sign)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
